<template>
  <div class="border">
    <div class="lan"></div>
    <span class="p">消费列表</span>
    <div class="erhang">
    </div>
    <div class="table" style="font-size: 10px">
      <el-table :data="list1" stripe style="width: 98%; font-size: 15px" size="mini" id="out-table">
        <el-table-column prop="userPid" label="编号" align="center" min-width="15%">
        </el-table-column>
        <el-table-column prop="userImg" label="头像" align="center" min-width="15%">
          <template slot-scope="scope">
            <el-avatar size="large" :src="scope.row.userImg"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="userNick" label="昵称" align="center" min-width="15%">
        </el-table-column>
        <el-table-column prop="userPay" label="消费总额" align="center" min-width="15%">
        </el-table-column>
        <el-table-column prop="userOrder" label="产品订单数" align="center" min-width="15%" :formatter="userProCount">
        </el-table-column>
        <el-table-column prop="userCombo" label="套餐订单数" align="center" min-width="15%" :formatter="userComCount">
        </el-table-column>

        <el-table-column prop="userId" label="操作" align="center" min-width="35%">
          <template slot-scope="scope">
              <el-button type="primary"   @click="drawer = true,projectList(scope.row)" style="margin-left: 16px;">产品列表</el-button>
              <el-button type="success"   @click="drawer1 = true,getComList(scope.row)"  style="margin-left: 16px;">套餐列表</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-drawer
  title="我是标题"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <el-table :data="project" stripe style="width: 98%; font-size: 15px" size="mini" id="out-table">
              <el-table-column prop="proName" label="产品名称" align="center" min-width="15%"> </el-table-column>
              <el-table-column prop="typeName" label="产品类型" align="center" min-width="15%"> </el-table-column>
              <el-table-column prop="price" label="产品价格" align="center" min-width="15%"> </el-table-column>
              <el-table-column prop="surplusCount" label="产品数量" align="center" min-width="15%"> </el-table-column>
              <el-table-column prop="description" label="产品描述" align="center" min-width="15%"> </el-table-column>
            </el-table>
</el-drawer>


<el-drawer
  title="我是标题"
  :visible.sync="drawer1"
  :direction="direction1"
  :before-close="handleClose1">
    <el-table :data="tableData" stripe style="width: 98%; font-size: 15px" size="mini" id="out-table">
      <el-table-column prop="id" label="序号" align="center" min-width="15%"> </el-table-column>
      <el-table-column prop="combonum" label="套餐编号" align="center" min-width="15%"> </el-table-column>
      <el-table-column prop="comboname" label="套餐名称" align="center" min-width="15%"> </el-table-column>
      <el-table-column prop="comboporct" label="套餐价钱" align="center" min-width="15%"> </el-table-column>
      <el-table-column prop="comboeffect" label="套餐特色" align="center" min-width="15%"> </el-table-column>       
    </el-table>
</el-drawer>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
window.Event = new Vue();
import axios from "axios";
export default {
  data() {
    return {
      list1: [],
      minPay: "",
      minPay: "",
      form3: [],
      form2: [],
      projectCount: "",
      direction: "rtl",
      direction1: "rtl",
      drawer: false,
      drawer1: false,
      tableData: [],
      project:[],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios({
        url: "/api/user/getYhList1",
        method: "GET",
      }).then((res) => {
        this.list1 = res.data;
      });
    },
    userProCount(sss) {
      return Number(sss.userOrder.split(",").length);
    },
    userComCount(sss) {
      return Number(sss.userCombo.split(",").length);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleClose1(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    projectList(sss) {
      axios({
        url: "/api/user/getUserProject",
        method: "GET",
        params: {
          ids: sss.userOrder,
        },
      }).then((res) => {
        this.project = res.data;
      });
    },
    getComList(sss) {
      axios({
        url: "/api/user/getComboList",
        method: "GET",
        params: {
          ids: sss.userCombo,
        },
      }).then((res) => {
        this.tableData = res.data;
      });
    },
  },
};
</script>

<style>
html,
body {
  height: 100%;
  background-color: #f2f7fb;
}

.table {
  margin-top: 20px;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.el-upload--text {
  border: none;
  width: 100px;
  height: 100px;
  border-radius: 20px;
}
html {
  display: block;
}

.border {
  border-width: 0px;
  /* position: absolute; */
  left: 0px;
  top: 0px;
  width: 88%;
  height: 912px;
  background: inherit;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 6%;
  margin-top: 10px;
}

.erhang {
  margin-top: 20px;
}

.lan {
  border-width: 0px;
  left: 0px;
  top: 0px;
  width: 6px;
  height: 20px;
  background: inherit;
  background-color: rgba(41, 132, 248, 1);
  border: none;
  border-radius: 8px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-left: 20px;
  margin-top: 10px;
  display: inline-block;
}

.p {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  font-kerning: normal;
  margin-left: 30px;
  display: inline-block;
  margin-top: 10px;
}

.el-switch__label--left {
  position: relative;
  left: 46px;
  color: #fff;
  z-index: -1111;
}

.el-switch__core {
  width: 50px !important;
}

.el-switch__label--right {
  position: relative;
  right: 46px;
  color: #fff;
  z-index: -1111;
}

.el-switch__label--right.is-active {
  z-index: 1111;
  color: #fff !important;
}

.el-switch__label--left.is-active {
  z-index: 1111;
  color: #9c9c9c !important;
}
</style>
